<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>Crafty - Controls</title>
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
	<link rel="shortcut icon" href="../favicon.ico">
	
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Controls<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Controls <span class="page-badge">System</span></h1><div class="doclet" id="Controls"><span class="markdown"><p>A built-in system for linking specific inputs to general types of input events.</p>
</span><div class="note"><span class="markdown"><p><strong>Note:</strong> The methods provided by this system are likely to change in future verisons of Crafty, as more input types are supported.</p>
</span></div><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>TriggerInputDown <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {name}</span></span>]</span></dt><dd>When a trigger group is activated</dd></dl><dl class="trigger"><dt>TriggerInputUp <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {name, downFor}</span></span>]</span></dt><dd>When a trigger group is released</dd></dl><dl class="trigger"><dt>DirectionalInput <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {name, x, y}</span></span>]</span></dt><dd>When a directional input changes</dd></dl></div></div></div><div><h4>Methods</h4><ul class="page-toc"><li><a href="#-defineDpad">.defineDpad()</a></li><li><a href="#-defineTriggerGroup">.defineTriggerGroup()</a></li></ul><div class="doclet" id="-defineDpad"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.defineDpad()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-noun">defineDpad</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">string </span><span class="sig-noun">name</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">obj </span><span class="sig-noun">definition</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">obj </span><span class="sig-noun">options</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> name </dt><dd><span class="markdown"><p>a name for the dpad input</p>
</span></dd></dl><dl class="parameter"><dt> definition </dt><dd><span class="markdown"><p>an object which defines the inputs and directions for the dpad</p>
</span></dd></dl><dl class="parameter"><dt> options </dt><dd><span class="markdown"><p>a set of options for the dpad</p>
</span></dd></dl></div><span class="markdown"><p>A dpad is a type of directional control which maps a set of triggers to a set of directions.</p>
<p>The options object has two properties:</p>
<ul>
<li><code>normalize</code> <em>(bool)</em>: If true, the directional input will be normalized to a unit vector.  Defaults to false.</li>
<li><code>multipleDirectionBehavior</code> <em>(string)</em>: How to behave when multiple directions are active at the same time.  Values are &quot;first&quot;, &quot;last&quot;, and &quot;all&quot;.  Defaults to &quot;all&quot;.</li>
</ul>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Define a two-direction dpad, with two keys each bound to the right and left directions</span>
Crafty.s(<span class="hljs-string">"Controls"</span>).defineDpad(<span class="hljs-string">"MyDpad"</span>, {
  {<span class="hljs-attr">RIGHT_ARROW</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">LEFT_ARROW</span>: <span class="hljs-number">180</span>, <span class="hljs-attr">D</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">A</span>: <span class="hljs-number">180</span>}
});</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Controllable.html">Controllable</a></li><li><a href="Multiway.html">Multiway</a></li></ul></div></div><div class="doclet" id="-defineTriggerGroup"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.defineTriggerGroup()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-noun">defineTriggerGroup</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">string </span><span class="sig-noun">name</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">obj </span><span class="sig-noun">definition</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> name </dt><dd><span class="markdown"><p>a name for the trigger group</p>
</span></dd></dl><dl class="parameter"><dt> definition </dt><dd><span class="markdown"><p>an object which defines the inputs for the trigger</p>
</span></dd></dl></div><span class="markdown"><p>A trigger group is a set of togglable inputs mapped to the same event.
If any of the inputs are down, the trigger is considered down.  If all are up, it is considered up.
When the trigger state changes, a <code>TriggerInputUp</code> or <code>TriggerInputDown</code> event is fired.</p>
<p>The definition object lists the inputs that are mapped to the trigger:</p>
<ul>
<li><code>keys</code>: An array of Crafty keycodes</li>
<li><code>mouseButtons</code>: An array of Crafty mouse button codes</li>
</ul>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Define a trigger group mapped to the left mouse button and the A and B keys.</span>
Crafty.s(<span class="hljs-string">"Controls"</span>).defineTriggerGroup(<span class="hljs-string">"MyTrigger"</span>, {
  <span class="hljs-attr">mouseButtons</span>: [Crafty.mouseButtons.LEFT],
  <span class="hljs-attr">keys</span>: [Crafty.keys.A, Crafty.keys.B]
});</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Controllable.html">Controllable</a></li></ul></div></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
